<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../js/jquery-3.6.0.min.js"></script>
    <style>
        * {
            padding: 0;
            margin: 0;
        }

        li {
            list-style: none;
        }

        .wrap {
            padding: 8px;
        }

        .list {
            margin-top: 10px;
        }

        .list li {
            height: 40px;
            line-height: 40px;
            text-indent: 10px;
            border: 1px dashed #333;
        }

        .list li+li {
            border-top: 0;
        }
    </style>
</head>

<body>
    <div class="wrap">
        <h2 id="title">jquery元素获取</h2>
        <div class="list">
            <li class="first">01</li>
            <li>02</li>
            <li class="mid">03</li>
            <li>04</li>
            <li>05</li>
            <li class="last">06</li>
        </div>
    </div>
</body>
<script>
    // jquey中通过$()获取元素 => 得到一个实例化对象(伪数组)  => jquery对象
    // console.log($);


    // jquery如何获取元素?
    // (1) 传入一个css选择器(css2/css3)
    // console.log($("#title"));
    // console.log($(".first"));
    // console.log($(".list li"));

    // (2) 传入原生DOM元素 / DOM元素的集合
    var first = document.querySelector(".first");
    console.log($(first));

    var liList = document.querySelectorAll(".list li");
    console.log($(liList));

    // 3. 传入一个jquery对象(伪数组)
    console.log($($(".list li")));


    // 注意:
    // 只有jquery对象才能使用jquery的拓展方法, 原生DOM只能使用原生的属性和方法
    //  => 如果原生DOM想要使用jquery的方法 => 先转化为jquery对象



</script>

</html>